import React from 'react'
import ReactDOM from 'react-dom'
function before(beforeFn) {
  return function (target, methodName, descriptor) {
    const oldMethod = descriptor.value
    descriptor.value = function () {
      // eslint-disable-next-line prefer-rest-params
      beforeFn.apply(this, arguments)
      // eslint-disable-next-line prefer-rest-params
      return oldMethod.apply(this, arguments)
    }
  }
}
function after(afterFn) {
  return function (target, methodName, descriptor) {
    const oldMethod = descriptor.value
    descriptor.value = function () {
      // eslint-disable-next-line prefer-rest-params
      const result = oldMethod.apply(this, arguments)
      // eslint-disable-next-line prefer-rest-params
      afterFn.apply(this, arguments)
      return result
    }
  }
}
class App extends React.Component {
  @before(() => console.log('before'))
  onClickBefore() {
    console.log('beforeClick')
  }
  @after(() => console.log('after'))
  onClickAfter() {
    console.log('afterClick')
  }
  @after(() => fetch('/api/report'))
  ajaxClick() {
    console.log('ajaxClick')
  }
  render() {
    return (
      <div>
        <button onClick={this.onClickBefore}>beforeClick</button>
        <button onClick={this.onClickAfter}>afterClick</button>
        <button onClick={this.ajaxClick}>ajaxClick</button>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))
